---
id: index
title: Bottom Sheet
hide_title: true
sidebar_label: Bottom Sheet
description: A performant interactive bottom sheet with fully configurable options 🚀
image: /img/bottom-sheet-preview.gif
slug: /
---

# React Native Bottom Sheet

[![version](https://img.shields.io/github/package-json/v/gorhom/react-native-bottom-sheet/v2?label=version&style=flat-square)](https://www.npmjs.com/package/@gorhom/bottom-sheet) [![npm](https://img.shields.io/npm/l/@gorhom/bottom-sheet?style=flat-square)](https://www.npmjs.com/package/@gorhom/bottom-sheet) [![npm](https://img.shields.io/badge/types-included-blue?style=flat-square)](https://www.npmjs.com/package/@gorhom/bottom-sheet) [![runs with expo](https://img.shields.io/badge/Runs%20with%20Expo-4630EB.svg?style=flat-square&logo=EXPO&labelColor=f3f3f3&logoColor=000)](https://expo.io/)

A performant interactive bottom sheet with fully configurable options 🚀

import useBaseUrl from "@docusaurus/useBaseUrl";
import Video from "@theme/Video";

<Video
  title="React Native Bottom Sheet"
  url={useBaseUrl("video/bottom-sheet-preview.mp4")}
  img={useBaseUrl("img/bottom-sheet-preview.gif")}
/>

## Features

- Modal presentation view, [Bottom Sheet Modal](./modal).
- Smooth gesture interactions & snapping animations.
- Support `FlatList`, `SectionList`, `ScrollView` & `View` scrolling interactions, [read more](./scrollables).
- Support `React Navigation` Integration, [read more](./react-navigation-integration).
- Compatible with Reanimated v1.
- Compatible with `Expo`.
- Accessibility support.
- Written in `TypeScript`.

## Installation

This version is written with `Reanimated v1` & compatible with `Reanimated v2`:

```bash
yarn add @gorhom/bottom-sheet@^2
```

#### Dependencies

This library needs these dependencies to be installed in your project before you can use it:

```bash
yarn add react-native-reanimated@^1 react-native-gesture-handler
```

:::info
**React Native Gesture Handler** needs extra steps to finalize its installation, please follow their [installation instructions](https://github.com/software-mansion/react-native-gesture-handler).

**React Native Reanimated v1** needs extra steps to finalize its installation, please follow their [installation instructions](https://docs.swmansion.com/react-native-reanimated/docs/1.x.x/getting_started).
:::

## Built With ❤️

- [react-native-reanimated](https://github.com/software-mansion/react-native-reanimated)
- [react-native-gesture-handler](https://github.com/software-mansion/react-native-gesture-handler)
- [react-native-redash](https://github.com/wcandillon/react-native-redash)
- [react-native-builder-bob](https://github.com/callstack/react-native-builder-bob)

## Sponsor & Support

To keep this library maintained and up-to-date please consider [sponsoring it on GitHub](https://github.com/sponsors/gorhom). Or if you are looking for a private support or help in customizing the experience, then reach out to me on Twitter [@gorhom](https://twitter.com/gorhom).